<template>
  <div class="course-create-or-edit">
    <back-by-name
      component="course-manager"
      :title="isEdit ? '编辑课程' : '创建课程'"
    >
      <el-button type="primary" @click="handleSave">保存</el-button>
    </back-by-name>
    <el-card>
      <div slot="header">
        <!-- 步骤条 -->
        <el-steps :active="activeStep" simple>
          <el-step
            v-for="(item, i) in steps"
            :key="item.id"
            :title="item.title"
            :icon="item.icon"
            @click.native="activeStep = i"
          ></el-step>
        </el-steps>
      </div>
      <!-- 步骤对应的表单结构 -->
      <el-form label-width="80px">
        <!-- 基本信息 -->
        <div v-show="activeStep === 0">
          <el-form-item label="课程名称">
            <el-input v-model="course.courseName"></el-input>
          </el-form-item>
          <el-form-item label="是否收费">
            <el-switch
              active-color="#13ce66"
              :active-value="0"
              :inactive-value="1"
              v-model="course.free"
              active-text="付费"
              inactive-text="免费"
            >
            </el-switch>
          </el-form-item>

          <el-form-item label="售卖价格">
            <el-input
              v-model="course.price"
              type="number"
              :min="0"
              :disabled="course.free == 1"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="课程分类">
            <el-cascader
              v-model="course.selection"
              :options="options"
              :props="{
                expandTrigger: 'hover',
                label: 'value',
                value: 'id',
                children: 'courseTypeDtos',
              }"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="课程难度">
            <el-select v-model="course.level" placeholder="请选择难度">
              <el-option
                v-for="(item, index) in ['零基础', '初阶', '进阶', '高阶']"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- 课程封面 -->
        <div v-show="activeStep === 1">
          <!-- 封装为图片上传组件 -->
          <course-image
            v-model="course.image"
            label="课程封面"
            :limit="10"
          ></course-image>
        </div>
        <!-- 课程详情 -->
        <div v-show="activeStep === 2">
          <el-form-item label="课程详情">
            <text-editor v-model="course.description"></text-editor>
          </el-form-item>
        </div>
        <!-- 下一步按钮 -->
        <el-form-item v-if="activeStep !== steps.length - 1">
          <el-button @click="activeStep++">下一步</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import CourseImage from "./CourseImage";
import {
  editCourseInfo,
  getCourseInfo,
  addCourseInfo,
  getOptions,
} from "@/services/course";
import TextEditor from "@/components/TextEditor";

import backByName from "@/components/BackHeader/backByName";
export default {
  name: "CourseCreateOrEdit",
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    courseId: {
      type: [String, Number],
    },
  },
  components: {
    backByName,
    CourseImage,
    TextEditor,
  },
  created() {
    this.getSelectOption();
    // 检测当前是否为编辑功能，如果是，根据 courseId 请求课程数据
    if (this.isEdit) {
      this.loadCourse();
    }
  },
  data() {
    return {
      // 步骤的进度
      activeStep: 0,
      // 步骤条的相关信息
      steps: [
        { id: 1, title: "基本信息", icon: "el-icon-edit" },
        { id: 2, title: "课程封面", icon: "el-icon-picture" },
        { id: 3, title: "课程详情", icon: "el-icon-upload" },
      ],
      course: {
        courseName: "",
        free: 1,
        price: "",
        description: "<h3>无</h3>",
        image: "",
        direcId: 1,
        typeId: 1,
        selection: [1, 1],
        level: "零基础",
      },
      options: [],
    };
  },
  methods: {
    // 编辑功能根据 ID 加载课程信息
    async loadCourse() {
      if (this.isEdit) {
        const { data } = await getCourseInfo({ courseId: this.courseId });
        if (data.data) {
          this.course = data.data;
          if (this.course.direcId == null) {
            this.course.selection = [];
          } else {
            this.course.selection = [this.course.direcId, this.course.typeId];
          }
        }
      }
    },
    // 保存功能
    async handleSave() {
      [this.course.direcId, this.course.typeId] = [
        this.course.selection[0],
        this.course.selection[1],
      ];
      if (this.course.free) {
        this.course.price = 0;
      }
      if (this.isEdit) {
        var { data } = await editCourseInfo(this.course);
      } else {
        var { data } = await addCourseInfo(this.course);
      }
      if (data.msg) {
        this.$message.success(data.msg);
        this.$router.push({
          name: "course-manager",
        });
      }
    },
    getSelectOption() {
      getOptions().then((res) => {
        res.data.data.forEach((item) => {
          item.value = item.direction;
        });
        this.options = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-step {
  cursor: pointer;
}
.el-input {
  width: 300px;
}
.el-card {
  min-height: calc(100vh - 160px);
}
</style>
